<template lang="pug">
  el-form-item(:class="config.label?'':'form-label-hidden'" :label="config.label" :rules="rules")
    date-picker(v-if="config.dateType==='date'||!config.dateType" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
    datetime-picker(v-if="config.dateType==='datetime'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
    time-picker(v-if="config.dateType==='time'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
    daterange-picker(v-if="config.dateType==='daterange'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
    datetimerange-picker(v-if="config.dateType==='datetimerange'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
    yearmonth-picker(v-if="config.dateType==='yearmonth'" ref='date' :editor="editor" :config="config"  v-model="value" :readonly="readonly")
</template>
<script>
import inputCommon from '../../../../mixin/inputCommon'
import datePicker from './datePicker'
import datetimePicker from './datetimePicker'
import timePicker from './timePicker'
import daterangePicker from './daterangePicker'
import datetimerangePicker from './datetimerangePicker'
import yearmonthPicker from './yearmonthPicker'
import _ from 'lodash'

export default {
  name: 'dateRender',
  components: { datePicker, datetimePicker, timePicker, daterangePicker, datetimerangePicker, yearmonthPicker },
  mixins: [inputCommon],
  props: ['config', 'editor'],
  inject: ['rootForm'],
  data() {
    return {
      // default: undefined
      value: '',
      effectiveValue: ''
    }
  },
  beforeDestroy() {
    if (this.config.type === 'param') {
      this.observer.removeParamsGetter(this.paramsGetter)
    } else if (this.config.type === 'normal') {
      this.observer.removeFilter(this.filterFn)
    }
  },
  created() {
    this.observer = this.rootForm.dataInterfaceObserverManage.get(this.config.dataInterfaceId)
    if (this.config.type === 'param') {
      if (this.config.dateType.indexOf('range') === -1) {
        this.paramsGetter = () => {
          let obj = {}
          let params = this.config.paramName.split(',')
          params.forEach(one => {
            obj[one] = this.effectiveValue
          })
          return obj
        }
        this.observer.addParamsGetter(this.paramsGetter)
      } else {
        this.paramsGetter = () => {
          let obj = {}
          let paramsStart = this.config.paramNameStart.split(',')
          paramsStart.forEach(one => {
            obj[one] = this.effectiveValue ? this.effectiveValue[0] : ''
          })
          let paramsEnd = this.config.paramNameEnd.split(',')
          paramsEnd.forEach(one => {
            obj[one] = this.effectiveValue ? this.effectiveValue[1] : ''
          })
          return obj
        }
        this.observer.addParamsGetter(this.paramsGetter)
      }
    } else if (this.config.type === 'normal') {
      let filter = (data, filterKeyList) => {
        return data.filter(one => filterKeyList.some(key => {
          if (this.config.dateType.indexOf('range') === -1) {
            let v = _.at(one, key)[0]
            if (!v) {
              return false
            }
            return v.indexOf(this.effectiveValue) > -1
          } else {
            let v = _.at(one, key)[0]
            if (!v) {
              return false
            }
            return this.effectiveValue[0] <= v && this.effectiveValue[1] >= v
          }
        }))
      }

      this.filterFn = (data) => {
        let filterKeyList = this.config.filterKeys.split(',').map(one => one.trim())
        if (this.config.listKey) {
          let list = _.at(data, this.config.listKey)[0]
          let filteredList = filter(list, filterKeyList)
          _.update(data, this.config.listKey, () => filteredList)
          return data
        }
        return filter(data, filterKeyList)
      }
      this.observer.addFilter(this.filterFn)
    }
  },
  methods: {
    commit() {
      this.effectiveValue = this.value
    }
  }
}
</script>
